<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.BMS.entity.Violation.*"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统</title>

<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
<script src="../js/json2.js" type="text/javascript"></script>

<!-- CSS:使按键失效，用于权限控制  -->
<style type="text/css">
.disable {
	style ="pointer-events: none";
}
</style>

<!-- 导航栏图书检索 -->
<script type="text/javascript">
	function toSearch() {
		window.location.href = "../Book/BookSearch.jsp?book_id=" + document.getElementById("book_id").value;
	}
</script>

<!-- 初次加载页面 -->
<script type="text/javascript">
	window.onload = function() {
		var nowPage = parseInt(document.getElementById("nowPage").value);
		var orderBy = document.getElementById("orderBy").value;
		ajax(nowPage, orderBy);
	}
</script>

<!-- 上一页按钮事件 -->
<script type="text/javascript">
	function lastPage() {
		var nowPage = document.getElementById("nowPage");
		var orderBy = document.getElementById("orderBy").value;
		if (nowPage.value <= 1) {
			alert("已经是第一页！");
		} else {
			nowPage.value--;
			ajax(nowPage.value, orderBy);
		}
	}
</script>

<!-- 下一页按钮事件 -->
<script type="text/javascript">
	function nextPage() {
		var nowPage = document.getElementById("nowPage");
		var pageCount = document.getElementById("pageCount").value;
		var orderBy = document.getElementById("orderBy").value;
		if (nowPage.value == pageCount) {
			alert("已经是最后一页！");
		} else {
			nowPage.value++;
			ajax(nowPage.value, orderBy);
		}
	}
</script>

<!-- 页码条按钮事件 -->
<script type="text/javascript">
	function turnTo(obj) {
		var nowPage = obj.getAttribute("value");
		document.getElementById("nowPage").value = nowPage;
		var orderBy = document.getElementById("orderBy").value;
		ajax(nowPage, orderBy);
	}
</script>

<!-- 异步发送请求 -->
<script type="text/javascript">
	function ajax(nowPage, orderBy) {
		$.ajax({
			type : "GET",
			url : "./showViolation.do",
			data : {
				nowPage : nowPage,
				orderBy : orderBy
			},
			dataType : "json",
			success : function(data) {
				if (data.code == "200") {
					// 获取数据成功
					updateTable(data);

				} else if (data.code == "401") {
					// 暂无记录
					alert(data.msg);
				} else if (data.code == "402") {
					// 当前页码错误
					alert(data.msg);
				} else {
					// 未知错误
					alert("未知错误！");
				}
			},
			error : function() {
				alert("发送请求失败!");
			}
		});
	}
</script>

<!-- 渲染表单函数 -->
<script type="text/javascript">
	function updateTable(data) {
		// 渲染表格
		var tbody = document.createElement("tbody");
		tbody.setAttribute("id", "violationList");

		var tbody_old = document.getElementById("violationList");

		var violationList = JSON.parse(data.violationList);

		for (var i = 0; i < violationList.length; i++) {
			var tr = document.createElement("tr");
			tr.style = "width:100%; height:7%;";

			var td1 = document.createElement("td");
			td1.innerHTML = violationList[i].violation_ID;

			var td2 = document.createElement("td");
			var type = violationList[i].type;
			if(type=="lost") {
				td2.innerHTML = "图书遗失";
			}else if(type=="broken") {
				td2.innerHTML = "图书破损";
			} else if(type=="outdate") {
				td2.innerHTML = "逾期归还";
			} else {
				td2.innerHTML = "错误类型";
			}
			

			var td3 = document.createElement("td");
			td3.innerHTML = violationList[i].book_ID;

			var td4 = document.createElement("td");
			td4.innerHTML = violationList[i].reader_ID;

			var td5 = document.createElement("td");
			td5.innerHTML = violationList[i].manager_ID;

			var td6 = document.createElement("td");
			td6.innerHTML = violationList[i].reg_date;

			var td7 = document.createElement("td");
			var status = violationList[i].status;
			if (violationList[i].status == true) {
				td7.innerHTML = "已处理";
			} else if (violationList[i].status == false) {
				td7.innerHTML = "未处理";
			} else {
				td7.innerHTML = "异常";
			}

			var td8 = document.createElement("td");

			var a1 = document.createElement("a");
			a1.setAttribute("data-toggle", "modal");
			a1.setAttribute("data-target", "#myModal");
			a1.setAttribute("onclick", "getImfo(this)");
			a1.innerHTML = "编辑";
			var a2 = document.createElement("a");
			a2.setAttribute("onclick", "violationDel(this)");
			a2.innerHTML = "删除";
			var label = document.createElement("label");
			label.innerHTML = "&nbsp;&nbsp;&nbsp;";

			td8.appendChild(a1);
			td8.appendChild(label);
			td8.appendChild(a2);

			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.appendChild(td5);
			tr.appendChild(td6);
			tr.appendChild(td7);
			tr.appendChild(td8);
			tbody.appendChild(tr);
		}

		document.getElementById("showArea").replaceChild(tbody, tbody_old);

		// 更新总页码
		// span
		var span_last = document.createElement("span");
		span_last.setAttribute("aria-hidden", "true");
		span_last.innerHTML = "<上一页";

		var span_next = document.createElement("span");
		span_next.setAttribute("aria-hidden", "true");
		span_next.innerHTML = "下一页>";

		// a
		var a_last = document.createElement("a");
		a_last.setAttribute("onclick", "lastPage()");
		a_last.setAttribute("aria-label", "Previous");

		var a_next = document.createElement("a");
		a_next.setAttribute("onclick", "nextPage()");
		a_next.setAttribute("aria-label", "Previous");

		// li
		var lastPage = document.createElement("li");
		lastPage.setAttribute("id", "lastPage");

		var nextPage = document.createElement("li");
		nextPage.setAttribute("id", "nextPage");

		// ul
		var pager = document.createElement("ul");
		pager.setAttribute("class", "pagination");
		pager.setAttribute("id", "pager");

		// 整合
		a_last.appendChild(span_last);
		lastPage.appendChild(a_last);

		a_next.appendChild(span_next);
		nextPage.appendChild(a_next);

		pager.appendChild(lastPage);
		pager.appendChild(nextPage);
		<!-- 渲染页数栏 -->
		var pageCount = data.pageCount;
		document.getElementById("pageCount").value = pageCount;

		for (var i = 0; i < pageCount; i++) {

			var a = document.createElement("a");
			a.setAttribute("href", "#");
			a.setAttribute("value", i + 1);
			a.setAttribute("onclick", "turnTo(this)");
			a.innerHTML = (i + 1);

			var li = document.createElement("li");
			li.appendChild(a);
			pager.insertBefore(li, nextPage);
		}

		// 更新页码条
		var old_pager = document.getElementById("pager");
		var pager_nav = document.getElementById("pager_nav");
		pager_nav.replaceChild(pager, old_pager);
	}
</script>

<!-- 编辑按钮事件 - 渲染模态框 -->
<script type="text/javascript">
	function getImfo(obj) {
		var parent = obj.parentElement.parentElement;
		var childs = parent.childNodes;

		document.getElementById("violation_id").innerHTML = childs[0].innerHTML;
		var type = childs[1].innerHTML;
		if(type=="图书遗失") {
				document.getElementById("type").value = "lost";
			}else if(type=="图书破损") {
				document.getElementById("type").value = "broken";
			} else if(type=="逾期归还") {
				document.getElementById("type").value = "outdate";
			} else {
				
			}
		
		document.getElementById("book_ID").value = childs[2].innerHTML;
		document.getElementById("reader_id").value = childs[3].innerHTML;
		document.getElementById("manager_id").value = childs[4].innerHTML;
		document.getElementById("reg_date").value = childs[5].innerHTML;
		if (childs[6].innerHTML == "未处理")
			document.getElementById("status").value = "false";
		else
			document.getElementById("status").value = "true";

	}
</script>

<!-- 保存编辑事件 -->
<script type="text/javascript">
	function update() {
		var violation_ID = document.getElementById("violation_id").innerHTML;
		var type = document.getElementById("type").value;
		var book_ID = document.getElementById("book_ID").value;
		var reader_ID = document.getElementById("reader_id").value;
		var manager_ID = document.getElementById("manager_id").value;
		var reg_date = document.getElementById("reg_date").value;
		var status = document.getElementById("status").value;
		
		var reg=/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; 
		
		if(book_ID.length==0) {
			alert("图书ID不能为空!");
		} else if(reader_ID.length==0) {
			alert("读者ID不能为空！");
		} else if(manager_ID.length==0) {
			alert("管理员ID不能为空！");
		} else if(reg_date.length==0) {
			alert("日期不能为空！");
		} else if(!reg_date.match(reg)) {
			// 日期格式不正确
			alert("请输入正确的日期格式！");
		}else {
			$.ajax({
			type:"POST",
			url:"./violationUpdate.do",
			data:{violation_ID:violation_ID, type:type, book_ID:book_ID, reader_ID:reader_ID, manager_ID:manager_ID, reg_date:reg_date, status:status},
			dataType:"json",
			success:function(data) {
				if(data.code=="200") {
					// 成功
					alert(data.msg);
					var nowPage = parseInt(document.getElementById("nowPage").value);
					var orderBy = document.getElementById("orderBy").value;
					ajax(nowPage, orderBy);
				} else if(data.code=="401") {
					// 读者不存在
					alert(data.msg);
				} else if(data.code=="402") {
					// 图书不存在
					alert(data.msg);
				} else {
					alert("未知错误！");
				}
			},
			error:function() {
				alert("保存失败！");
			}
		});
		}
		
		
	}
</script>

<!-- 删除按钮事件 -->
<script type="text/javascript">
	function violationDel(obj) {
		var parent = obj.parentElement.parentElement;
		var childs = parent.childNodes;
		var violation_id = childs[0].innerHTML;
		if(violation_id.length==0) {
			alert("删除失败，记录异常！");
		} else {
			$.ajax({
				type:"POST",
				url:"./violationDel.do",
				data:{violation_id:Number(violation_id)},
				dataType:"json",
				success:function(data) {
					if(data.code=="200") {
						// 成功
						alert(data.msg);
						var nowPage = parseInt(document.getElementById("nowPage").value);
						var orderBy = document.getElementById("orderBy").value;
						ajax(nowPage, orderBy);
					} else if(data.code=="401") {
						// 该记录不存在
						alert(data.msg);
					}
				},
				error:function() {
				
				}
			});
		}
	}
</script>

</head>

<body>

	<!-- 大背景 -->
	<div class="container" align="center"
		style=" width:auto; height:768px; background-color:#BFEDEA; background-image:url(../img/bg2.png); -moz-background-size:100% 100%; background-size:100% 100%;">

		<!-- 导航栏 -->
		<div style="width:100%; height:auto;">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">

						<a class="navbar-brand" href="../main.jsp">首页</a>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="defaultNavbar1">
						<ul class="nav navbar-nav">
							<!-- 图书管理下拉框 -->
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown" role="button" aria-expanded="false">图书管理<span
									class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a id="bookManage" href="../Book/BookManage.jsp">管理图书</a></li>
									<li><a id="bookSearch" href="../Book/BookSearch.jsp">图书查询</a></li>
									<li><a id="bookBorrow" href="../Book/BookBorrow.jsp">图书借阅</a></li>
									<li><a id="bookReturn" href="../Book/BookReturn.jsp">图书归还</a></li>
								</ul></li>

							<!-- 违规管理下拉框 -->
							<li class="dropdown" id="violation_manage"><a href="#"
								class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-expanded="false">违规管理<span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="./ViolationManage.jsp">管理违规记录</a></li>
									<li><a href="./ViolationReg.jsp">违规登记</a></li>
								</ul></li>

							<!-- 个人中心下拉框 -->
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown" role="button" aria-expanded="false">个人中心<span
									class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="../User/PersonalImfo.jsp">个人资料</a></li>
									<li id="bookHistory"><a href="../User/BookHistory.jsp">借阅记录</a></li>
									<li id="violationHistory"><a
										href="../User/ViolationHistory.jsp">违规记录</a></li>
									<li><a href="../User/Logout.do">退出登录</a></li>
								</ul></li>

						</ul>
						<!-- 搜索栏 -->
						<div style="float:right;">
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									<input type="text" id="book_id" class="form-control"
										placeholder="输入图书编号">
								</div>
								<button type="button" class="btn btn-default"
									onclick="toSearch()">查询</button>
							</form>
						</div>

					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
		</div>

		<div class="container" align="center"
			style="width:80%; height:85%; background-color:rgba(255, 255, 255, 0.5)">
			<div align="center" style="text-align:center;">
				<label style="margin:15px 0 0 0; font-family:华文行楷; font-size:35px;">违规管理</label>
				<hr>
			</div>

			<table id="showArea" class="table-hover table-striped" border="1"
				cellspacing="0"
				style="font-size:18px; width:100%; height:75%;border-collapse:collapse; text-align:center; margin:1% auto auto auto;">
				<thead style="background-color:#3C9C92;">
					<td>违规编号</td>
					<td>违规类型</td>
					<td>图书ID</td>
					<td>违规读者</td>
					<td>登记管理员</td>
					<td>登记日期</td>
					<td>处理状态</td>
					<td>操作</td>
				</thead>
				<tbody id="violationList">
					<tr style="width:100%; height:7%;">

					</tr>
				</tbody>
			</table>

			<!-- 页码条 -->
			<div class="container" style="width:100%;height:8%">
				<nav id="pager_nav">
					<!-- Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks-->
					<ul class="pagination" id="pager">
						<li id="lastPage"><a aria-label="Previous"
							onclick="lastPage()"><span aria-hidden="true"><上一页</span></a></li>
						<li id="nextPage"><a aria-label="Next" onclick="nextPage()"><span
								aria-hidden="true">下一页></span></a></li>
					</ul>
				</nav>
			</div>
		</div>
		<input type="hidden" id="nowPage" value="1" /> <input type="hidden"
			id="pageCount" value="" /> <input type="hidden" id="orderBy"
			value="violation_ID" />
		<!-- modal示例 -->

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">编辑</h4>
					</div>
					<div class="modal-body">
						<table>
							<tr>
								<td>违规编号：</td>
								<td><label id="violation_id"></label></td>
							</tr>
							<tr>
								<td>违规类型：</td>
								<td><select id="type">
										<option value="outdate" selected="selected">逾期归还</option>
										<option value="broken">图书破损</option>
										<option value="lost">图书遗失</option>
								</select></td>
							</tr>
							<tr>
								<td>图书ID：</td>
								<td><input type="text" id="book_ID" /></td>
							</tr>
							<tr>
								<td>读者ID：</td>
								<td><input type="text" id="reader_id" /></td>
							</tr>
							<tr>
								<td>登记管理员ID：</td>
								<td><input type="text" id="manager_id" /></td>
							</tr>
							<tr>
								<td>登记日期:</td>
								<td><input type="text" id="reg_date" /></td>
							</tr>
							<tr>
								<td>处理状态：</td>
								<td><select id="status">
										<option value="false" selected="selected">未处理</option>
										<option value="true">已处理</option>
								</select></td>
							</tr>

						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="update()" >保存更改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</div>
</body>


<!-- 权限控制 -->
<script type="text/javascript">
 	var user_type = "<%=session.getAttribute("user_type")%>";
 	if(user_type!=null) {
 		if(user_type=="reader") {
			document.getElementById("bookManage").style['pointer-events'] = 'none';
			document.getElementById("bookBorrow").style['pointer-events'] = 'none';
			document.getElementById("bookReturn").style['pointer-events'] = 'none';
 		} else {
 			document.getElementById("bookHistory").style['pointer-events'] = 'none';
 			document.getElementById("violationHistory").style['pointer-events'] = 'none';
 		}
 	}
</script>

</html>
